<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script src="jquery.activity-indicator-1.0.0.js" />

<style type="text/css">
body {
	color: #fff;
	background: #00406c;
	padding: 60px 10px 20px 20px;
}
.square {
	width: 180px;
	height: 160px;
	float: left;
	margin: 10px;
	padding: 10px 20px;
	color: #000;
	background: #fff;
	font-family: Helvetica, Arial, Sans-Serif;
}
</style>
</head>
<body>

<div id="busy1" class="square">
</div>
<div id="busy2" class="square" style="background:#c7cfd3">
</div>
<div id="busy3" class="square" style="background:#0059a6">
</div>
<div id="busy4" class="square">
</div>
<div id="busy5" class="square" style="background:#afafaf">
</div>

<div class="square" style="background:#002545">
	<input id="busy6" type="text" style="padding:3px 25px 2px 0;" />
</div>

<script>
	$(function() {
		$('#busy1').activity();
		$('#busy2').activity({segments: 8, steps: 3, opacity: 0.3, width: 4, space: 0, length: 5, color: '#0b0b0b', speed: 1.5});
		$('#busy3').activity({segments: 8, width:2, space: 0, length: 3, color: '#fff', speed: 1.5});
		$('#busy4').activity({segments: 12, width: 5.5, space: 6, length: 13, color: '#252525', speed: 1.5});
		$('#busy5').activity({segments: 12, align: 'left', valign: 'top', steps: 3, width:2, space: 1, length: 3, color: '#030303', speed: 1.5});
		$('#busy6').activity({outside: true, align: 'right', segments: 10, steps: 3, width:2, space: 0, length: 3, color: '#000', speed: 1.5});
	});
</script>

</body>
</html>